Conversation
Add runtime-configurable branding via environment variables so each chain deployment can customize name, logo, colors without rebuilding. Backend: new /api/config endpoint serving branding config from env vars (CHAIN_NAME, CHAIN_LOGO_URL, ACCENT_COLOR, BACKGROUND_COLOR_DARK, BACKGROUND_COLOR_LIGHT, SUCCESS_COLOR, ERROR_COLOR). Frontend: BrandingContext fetches config once on load and applies CSS custom properties for accent, success/error, and derived surface palettes. Logo, chain name, favicon, and page title update dynamically. All values are optional with sensible defaults matching current Atlas branding.
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThis PR introduces white-label branding customization across the application stack. It adds environment variables for configurable branding (chain name, logo URL, accent and background colors), exposes a new Changes
Sequence Diagram(s)sequenceDiagram
participant Client as Client (Browser)
participant App as Frontend App
participant API as Backend /api/config
participant AppState as AppState (Config)
Client->>App: Load Application
App->>App: Mount BrandingProvider
activate App
App->>API: GET /api/config
activate API
API->>AppState: Read branding fields
AppState-->>API: Return branding config
API-->>App: JSON BrandingConfig
deactivate API
App->>App: deriveSurfaceShades(baseColor)
App->>App: applyPalette(derivedColors)
App->>App: Set CSS custom properties
deactivate App
App-->>Client: Render with custom branding
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
- Run cargo fmt to wrap long env var lines in main.rs - Remove unused rgbToHex function and mode parameter in color.ts - Fix react-refresh/only-export-components by separating BrandingContext definition into branding-context.ts and useBranding hook into its own file Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Explain how to customize chain name, logo, and color scheme via environment variables. Includes examples for blue, green, and minimal configurations. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The default branding comes from ev-node, not Atlas.
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
.env.example (1)
23-27: Consider quoting hex color values for parser compatibility.Some
.envparsers may interpret#as the start of a comment, even without a preceding space. Quoting ensures the full hex value is captured.🔧 Suggested fix
-ACCENT_COLOR=#dc2626 # Primary accent color (links, buttons, active states) -BACKGROUND_COLOR_DARK=#050505 # Dark mode base background -BACKGROUND_COLOR_LIGHT=#f4ede6 # Light mode base background -SUCCESS_COLOR=#22c55e # Success indicator color -ERROR_COLOR=#dc2626 # Error indicator color +ACCENT_COLOR="#dc2626" # Primary accent color (links, buttons, active states) +BACKGROUND_COLOR_DARK="#050505" # Dark mode base background +BACKGROUND_COLOR_LIGHT="#f4ede6" # Light mode base background +SUCCESS_COLOR="#22c55e" # Success indicator color +ERROR_COLOR="#dc2626" # Error indicator color🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.env.example around lines 23 - 27, The hex color values in the .env example (ACCENT_COLOR, BACKGROUND_COLOR_DARK, BACKGROUND_COLOR_LIGHT, SUCCESS_COLOR, ERROR_COLOR) may be parsed incorrectly due to the leading #; update each variable to wrap the hex value in quotes (e.g., change ACCENT_COLOR=#dc2626 to ACCENT_COLOR="#dc2626") and apply the same quoting to any other color vars in the file so parsers don't treat # as a comment.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@backend/crates/atlas-api/src/main.rs`:
- Line 51: The CHAIN_NAME env handling currently accepts an empty string; change
the retrieval logic for chain_name (the variable initialized where
std::env::var("CHAIN_NAME") is called) to treat empty or whitespace-only values
as unset by checking the env var result and falling back to "Atlas" when the
value is Err or when the Ok string is empty/only whitespace (e.g., trim and test
is_empty), so chain_name uses the default branding unless a non-empty value is
provided.
In `@docs/WHITE_LABELING.md`:
- Around line 5-13: The docs currently conflict on the default branding: the
intro claims the explorer falls back to "ev-node" branding while the CHAIN_NAME
table lists the default as "Atlas"; pick one canonical default and make the text
consistent by updating either the opening paragraph (replace "ev-node" with
"Atlas") or the table default (replace "`Atlas`" with "`ev-node`"), and ensure
the CHAIN_NAME entry and any other references to default branding in
WHITE_LABELING.md use that same value.
In `@frontend/src/context/BrandingContext.tsx`:
- Line 76: The forEach callback currently implicitly returns the result of
root.style.removeProperty(v) (vars.forEach(v => root.style.removeProperty(v));)
which violates the useIterableCallbackReturn rule; change the callback to a
block body so it returns void (e.g., vars.forEach(v => {
root.style.removeProperty(v); });) making sure the callback for vars.forEach
does not return any value.
In `@frontend/src/utils/color.ts`:
- Around line 34-40: Normalize and validate the input inside hexToRgb: trim and
ensure it starts with or without '#', accept 3- or 6-character hex forms (expand
3-char shorthand to 6-char), verify the final cleaned string is exactly 6 hex
digits (0-9a-f/A-F), and if validation fails either throw a clear error or
return a safe default RGB; then parse r/g/b with parseInt on the validated
string to avoid NaN channels. Ensure these checks are implemented in hexToRgb so
downstream CSS variable generation never receives invalid channel values.
---
Nitpick comments:
In @.env.example:
- Around line 23-27: The hex color values in the .env example (ACCENT_COLOR,
BACKGROUND_COLOR_DARK, BACKGROUND_COLOR_LIGHT, SUCCESS_COLOR, ERROR_COLOR) may
be parsed incorrectly due to the leading #; update each variable to wrap the hex
value in quotes (e.g., change ACCENT_COLOR=#dc2626 to ACCENT_COLOR="#dc2626")
and apply the same quoting to any other color vars in the file so parsers don't
treat # as a comment.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (18)
.env.exampleREADME.mdbackend/crates/atlas-api/src/handlers/config.rsbackend/crates/atlas-api/src/handlers/mod.rsbackend/crates/atlas-api/src/main.rsdocker-compose.ymldocs/WHITE_LABELING.mdfrontend/nginx.conffrontend/src/App.tsxfrontend/src/api/config.tsfrontend/src/components/Layout.tsxfrontend/src/context/BrandingContext.tsxfrontend/src/context/branding-context.tsfrontend/src/hooks/useBranding.tsfrontend/src/index.cssfrontend/src/pages/WelcomePage.tsxfrontend/src/utils/color.tsfrontend/tailwind.config.js
- Treat empty/whitespace CHAIN_NAME as unset, falling back to "Atlas" - Validate hex input in hexToRgb: trim, support 3-char shorthand, reject malformed values to avoid NaN CSS variables
Make the table header and intro consistent so operators understand that "Atlas" is the default ev-node branding, not a separate brand.
Summary
CHAIN_NAME,CHAIN_LOGO_URL,ACCENT_COLOR,BACKGROUND_COLOR_DARK,BACKGROUND_COLOR_LIGHT,SUCCESS_COLOR,ERROR_COLOR)GET /api/configendpoint serves branding config from environment variablesBrandingContextfetches config once on load, applies CSS custom properties for accent colors and derives surface palettes from background colorsTest plan
CHAIN_NAMEandACCENT_COLORin.env, verify title/links/buttons changeBACKGROUND_COLOR_DARK/BACKGROUND_COLOR_LIGHT, verify surface colors adapt in both themesCHAIN_LOGO_URLpointing to mounted branding asset, verify logo in navbar and welcome pagebunx vite buildsucceedsdocker compose build && docker compose up -dworks end-to-end🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Documentation